<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账单信息</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <!-- <link rel="stylesheet" href="css/comments.css" media="all"> -->
	<link rel="stylesheet" href="css/goods.css">
    <link rel="stylesheet" href="css/treeTable.css">
    <style>
		.maincontainer {
		    padding: 10px;
		}
        .layui-form-label{
            width: 130px;
        }
        @media screen and (max-width: 450px){
            .layui-form-item .layui-input-inline {
                margin-left: 160px;
            }
        }
        .layui-input-block{
            margin-left: 160px;
        }
        .payRecordFilesDiv,#selectTable,.table_total{
            display: none;
        }
        .table_total{
            text-align: right;
        }
        .imgdiv{
          /*  width: 200px;
            height: 300px; */
            overflow: hidden;
            background: #fff;
        }
        .imgdiv img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            <span class="block_title"></span>
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">账单编号：</label>
                <div class="layui-form-mid layui-word-aux billNo"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">餐饮总公司：</label>
                <div class="layui-form-mid layui-word-aux foodManagerName"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单内容</label>
                <div class="layui-input-block table">
                    <table class="layui-hide" id="selectTable" lay-filter="selectTable"></table>
                    <div class="table_total">合计：</div>
                </div>
            </div>
			<div class="layui-form-item payRecordFilesDiv">
			 	<label class="layui-form-label">支付凭证：</label>
			 	<div class="layui-input-inline">
			 		<div class="imgList">
			 			<ul class="mainpicture">
			 				<li class="showDImg1">
			
			 				</li>
			 			</ul>
			 		</div>
			 	</div>
			</div>
            <!-- <div class="layui-form-item payRecordFilesDiv">
                <label class="layui-form-label">支付凭证：</label>
                <div class="layui-input-block">
                    <div class="mainpicture">
                        <div class="showMImg">

                        </div>
                    </div>
                </div>
            </div> -->
            <div class="layui-form-item btnDiv">
            </div>
        </form>
    </div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container toolbarDemo">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="export" type="button">导出订单</button>
    </div>
</script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form', 'laydate', 'table', 'treeTable'], function() {
        var http = layui.http,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table,
            treeTable = layui.treeTable;

        var id = http.getPid('id')
        var deleteOrderList = []
        
        init()
        function init(){
            http.get('admin/order/bill/findById/foodManager',{
                id: id
            },function(res){
                if(res.code == 200){
                    var data = res.data
                    if(data.status==1){// 修改账单
                        $('.block_title').html('修改账单'+(data.status==1?' - 待结账':(d.status==2?' - 已付款待确认':(d.status==3?' - 已完成':''))))
                        var html = '<div class="layui-input-block"><button type="button" class="layui-btn modifyBtn">确认修改</button><button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button></div>'
                        $('.btnDiv').html(html)
                    }else if(data.status==2){ // 确认收款
                        $('.block_title').html('确认收款'+(data.status==1?' - 待结账':(data.status==2?' - 已付款待确认':(data.status==3?' - 已完成':''))))
                        var html = '<div class="layui-input-block"><button type="button" class="layui-btn sureBtn">确认收款</button><button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button></div>'
                        $('.btnDiv').html(html)
                    }else{
                        $('.block_title').html('账单详情'+(data.status==1?' - 待结账':(data.status==2?' - 已付款待确认':(data.status==3?' - 已完成':''))))
                    }

                    $('.billNo').html(data.billNo)
                    $('.foodManagerName').html(data.foodManagerName)

                    if(data.status == 1){ // 订单内容
                        $('#selectTable').show()
                        $('.table_total').show()
                        var selectTable = http.table1({
                            elem: '#selectTable',
                            id: 'selectTable',
                            toolbar: '#toolbarDemo',
                            cols: [[
                                {field:'shopOrderNo', title: '订单编号', align : 'center',
                                    templet: function(d){
                                        var html = ''
                                        html += '<a class="buttoncolor" href="orderDetail.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
                                        return html
                                    }
                                },
                                {field:'supplierName', title: '供应商名称', align : 'center'},
                                {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
                                {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                                {field:'goodCount', title: '商品数量', align : 'center'},
                                {field:'createTime', title: '下单时间', align : 'center'},
                                {field:'', title: '操作', align : 'center',fixed: 'right',width: 130,
                                    templet: function (d) {
                                        var html = '';
                                        html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" >删除</button>'
                                        return html;
                                    }
                                }
                            ]],
                            data: data.billInfoSingleWrapperOrderListVoList
                        })
                        // treeTable.render({
                        //     elem: '#selectTable',
                        //     data: data.billInfoSingleWrapperOrderListVoList,
                        //     toolbar: '#toolbarDemo',
                        //     tree: {
                        //         iconIndex:1
                        //     },
                        //     id: 'selectTable',
                        //     cols: [
                        //         {type: 'numbers', title: '序号',width: 60},
                        //         {field:'shopOrderNo', title: '订单编号', align : 'center',
                        //             templet: function(d){
                        //                 var html = ''
                        //                 html += '<a class="buttoncolor" href="orderDetail.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
                        //                 return html
                        //             }
                        //         },
                        //         {field:'supplierName', title: '供应商名称', align : 'center'},
                        //         {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
                        //         {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                        //         {field:'goodCount', title: '商品数量', align : 'center'},
                        //         {field:'createTime', title: '下单时间', align : 'center'},
                        //         {field:'', title: '操作', align : 'center',fixed: 'right',width: 130,
                        //             templet: function (d) {
                        //                 var html = '';
                        //                 html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" >删除</button>'
                        //                 return html;
                        //             }
                        //         }
                        //     ],
                        //     style: 'margin-top:0;',
                        //     tree: {
                        //         id: 'id',
                        //         pidName: 'pid',  // pid的字段名
                        //         childName: 'orderList',  // children的字段名
                        //     }
                        // })
                        
                        var sum = 0
                        for(var p=0;p<data.billInfoSingleWrapperOrderListVoList.length;p++){
                            sum += data.billInfoSingleWrapperOrderListVoList[p].orderTotalMoney
                        }
                        $('.table_total').html('合计：<span style="color: #fbaf7e">￥'+sum.toFixed(2)+'</span>')
                    }else{
                        $('#selectTable').show()
                        $('.table_total').show()
                        var selectTable = http.table1({
                            elem: '#selectTable',
                            id: 'selectTable',
                            toolbar: '#toolbarDemo',
                            cols: [[
                                {field:'shopOrderNo', title: '订单编号', align : 'center',
                                    templet: function(d){
                                        var html = ''
                                        html += '<a class="buttoncolor" href="orderDetail.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
                                        return html
                                    }
                                },
                                {field:'supplierName', title: '供应商名称', align : 'center'},
                                {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
                                {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                                {field:'goodCount', title: '商品数量', align : 'center'},
                                {field:'createTime', title: '下单时间', align : 'center'}
                            ]],
                            data: data.billInfoSingleWrapperOrderListVoList
                        })
                        // treeTable.render({
                        //     elem: '#selectTable',
                        //     data: data.billInfoSingleWrapperOrderListVoList,
                        //     toolbar: '#toolbarDemo',
                        //     tree: {
                        //         iconIndex:1
                        //     },
                        //     id: 'selectTable',
                        //     cols: [
                        //         {type: 'numbers', title: '序号',width: 60},
                        //         {field:'shopOrderNo', title: '订单编号', align : 'center',
                        //             templet: function(d){
                        //                 var html = ''
                        //                 html += '<a class="buttoncolor" href="orderDetail.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
                        //                 return html
                        //             }
                        //         },
                        //         {field:'supplierName', title: '供应商名称', align : 'center'},
                        //         {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
                        //         {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                        //         {field:'goodCount', title: '商品数量', align : 'center'},
                        //         {field:'createTime', title: '下单时间', align : 'center'},
                        //         {field:'', title: '操作', align : 'center',fixed: 'right',width: 130,
                        //             templet: function (d) {
                        //                 var html = '';
                        //                 html += '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" >删除</button>'
                        //                 return html;
                        //             }
                        //         }
                        //     ],
                        //     style: 'margin-top:0;',
                        //     tree: {
                        //         id: 'id',
                        //         pidName: 'pid',  // pid的字段名
                        //         childName: 'orderList',  // children的字段名
                        //     }
                        // })
                        
                        var sum = 0
                        for(var p=0;p<data.billInfoSingleWrapperOrderListVoList.length;p++){
                            sum += data.billInfoSingleWrapperOrderListVoList[p].orderTotalMoney
                        }
                        $('.table_total').html('合计：<span style="color: #fbaf7e">￥'+sum.toFixed(2)+'</span>')

                    }

                    if(data.payRecordFiles){ // 支付凭证
						var smallPic = JSON.parse(data.payRecordFiles);
                        $('.payRecordFilesDiv').show()
						var imghtml = '';
						for(var i=0;i<smallPic.length;i++){
							imghtml += '<div class="imgdiv">'+
											'<img src="'+(TUrl+smallPic[i])+'" onclick="onShowImg(\''+smallPic[i]+'\')">'+
										'</div>';
						}
						$('.showDImg1').html(imghtml);
                        /* var imgId = http.getUUID();
						var html = '<div id="div'+imgId+'" class="imgdiv">'+
                                        '<img onurl="'+data.payRecordFiles+'" src="'+(TUrl+data.payRecordFiles)+'" id="proimg'+imgId+'" onclick="onShowImg(\''+data.payRecordFiles+'\')">'+
                                    '</div>';
						
						$('.showMImg').html(html); */
                    }
                    window.onShowImg = function(img) {
                        http.photos('<div style="text-align:center;width:450px;height:450px;overflow:hidden;"><img src="' + TUrl+img + '" style="width:100%;height:100%;object-fit: contain"/></div>')
                    }
                    
                    // table操作
                    table.on('tool(selectTable)', function(obj){
                        if(obj.event=='del'){
                            // 删除
                            // console.log(obj)
                            var index = $(obj.tr).index()
                            data.billInfoSingleWrapperOrderListVoList.splice(index,1)
                            deleteOrderList.push(obj.data.shopOrderNo)
                            table.reload('selectTable');
                        }
                    })
                    // table的toolbar
                    table.on('toolbar(selectTable)', function (obj) {
                        if(obj.event=='export'){ // 导出
                            var param = {
                                id: id,
                                authentication: localStorage.getItem('xi-can-management-authentication')
                            }
                            if (param) {  
                                let paramsArray = [];  
                                //encodeURIComponent  
                                Object.keys(param).forEach(key => paramsArray.push(key + '=' + param[key]))  
                                window.open(TUrl+"admin/order/bill/exportInfo/foodManager?"+paramsArray.join('&'))
                            }
                        }
                    })
                }else{
                    layer.msg(res.msg)
                }
            })

            // 确认修改
            $(document).on('click','.modifyBtn',function(){
                if(deleteOrderList.length==0){
                    layer.msg('未进行修改')
                    return
                }
                http.myOpen({
                    title:'提示',
                    content:'<p style="text-align:center;margin-top:20px">是否确认修改账单！</p>',
                    area:['300px','150px'],
                    btn:['确定','取消'],
                    btn1:function(index, layero){
                        http.postJSON('admin/order/bill/delete/bill/order',JSON.stringify({
                            billId: id,
                            deleteOrderList: deleteOrderList
                        }),function(res){
                            if(res.code == 200){
                                layer.msg('操作成功')
                                layer.close(index)
                                setTimeout(function(){
                                    window.history.back()
                                },500)
                            }else{
                                layer.msg(res.msg)
                            }
                        })
                        
                    }
                });
            })

            // 确认收款
            $(document).on('click','.sureBtn',function(){
                http.myOpen({
                    title:'提示',
                    content:'<p style="text-align:center;margin-top:20px">是否确认收款！</p>',
                    area:['300px','150px'],
                    btn:['确定','取消'],
                    btn1:function(index, layero){
                        http.post('admin/order/bill/confirm',{
                            id: id,
                        },function(res){
                            if(res.code == 200){
                                layer.msg('操作成功')
                                layer.close(index)
                                setTimeout(function(){
                                    window.history.back()
                                },500)
                            }else{
                                layer.msg(res.msg)
                            }
                        })
                        
                    }
                });
            })
        }
    })
</script>
</body>
</html>